function playCard(card){
    var cardUrl = card.src.split("/");
    $.ajax({
        type: "POST",
        url: "battlefield_handle.php",
        data: "action=play_card&cardUrl="+"images/" + cardUrl[cardUrl.length - 1],
        success: function(html){
        }
    });
}
function onLoadLogin(){
	$(document).ready(function() {


        $("#login").hover(function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_login.png", "images/botm_login_hover.png");
            });
        }, function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_login_hover.png", "images/botm_login.png");
            });
        });

        $("#register_button").hover(function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_register.png", "images/botm_register_hover.png");
            });
        }, function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_register_hover.png", "images/botm_register.png");
            });
        });

        $("#register").hover(function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_register.png", "images/botm_register_hover.png");
            });
        }, function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_register_hover.png", "images/botm_register.png");
            });
        });

        $("#logout_button").hover(function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_logout.png", "images/botm_logout_hover.png");
            });
        }, function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_logout_hover.png", "images/botm_logout.png");
            });
        });

        $("#battle_button").hover(function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_battle.png", "images/botm_battle_hover.png");
            });
        }, function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_battle_hover.png", "images/botm_battle.png");
            });
        });

        $("#chat_enter").hover(function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_enter.png", "images/botm_enter_hover.png");
            });
        }, function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_enter_hover.png", "images/botm_enter.png");
            });
        });

        $("#accept").hover(function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_accept.png", "images/botm_accept_hover.png");
            });
        }, function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_accept_hover.png", "images/botm_accept.png");
            });
        });

        $("#decline").hover(function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_decline.png", "images/botm_decline_hover.png");
            });
        }, function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_decline_hover.png", "images/botm_decline.png");
            });
        });

        $("#end_turn_button").hover(function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_end_turn.png", "images/botm_end_turn_hover.png");
            });
        }, function(){
            $(this).attr("src", function(index, attr){
                return attr.replace("images/botm_end_turn_hover.png", "images/botm_end_turn.png");
            });
        });

        function unloadPopupBox() {    // TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#container").css({ // this is just for style
                "opacity": "1"
            });
        }

        function loadPopupBox() {    // To Load the Popupbox
            $('#popup_box').fadeIn("slow");
            $("#container").css({ // this is just for style
                "opacity": "0.3"
            });
        }
        if(document.contains(document.getElementById("username"))){
			document.getElementById("username").focus();
		}
	  $("#register_button, #login").click(function(e) {
	  	var username = $('#username').val();
	    var password = $('#password').val();
	    var action = $(this).attr('id');
	  	$.ajax({
	  		type: "POST",
	  		url: "validate.php",
	  		data: "action="+action+"&username="+username+"&password="+password,
	  		success: function(html){
	  			if(html == "register_button"){
	  				window.location = "register.php";
	  			}else{
	  				if(html == "userError"){
	  					document.getElementById("username").className = "error shadow";
	  					document.getElementById("password").className = "text shadow";
	  				}else if(html == "passError"){
	  					document.getElementById("password").className = "error shadow";
	  					document.getElementById("username").className = "text shadow";
	  				}else if(html == "redirect"){
	  					window.location = "lobby.php";
	  				}else{
	  					alert(html);
	  				}
	  			}
	  		} 
	  	});
	  	e.preventDefault();
	  });
	  $("#register").click(function(e) {
	  	var username = $('#username').val();
	    var password = $('#password').val();
	    var mail = $('#mail').val();
	    var action = $(this).attr('id');
	    var repeatPass = $('#repeat_pass').val();
	  	$.ajax({
	  		type: "POST",
	  		url: "validate.php",
	  		data: "action="+action+"&username="+username+"&password="+password+"&mail="+mail+"&repeatPass="+repeatPass,
	  		success: function(html){
				if(html == "userError"){
					document.getElementById("username").className = "error shadow";
					document.getElementById("password").className = "text shadow";
					document.getElementById("mail").className = "text shadow";
					document.getElementById("repeat_pass").className = "text shadow";
				}else if(html == "passError"){
					document.getElementById("password").className = "error shadow";
					document.getElementById("username").className = "text shadow";
					document.getElementById("mail").className = "text shadow";
					document.getElementById("repeat_pass").className = "text shadow";
				}else if(html == "mailError"){
					document.getElementById("mail").className = "error shadow";
					document.getElementById("username").className = "text shadow";
					document.getElementById("password").className = "text shadow";
					document.getElementById("repeat_pass").className = "text shadow";
				}else if(html == "repeatPassError"){
					document.getElementById("repeat_pass").className = "error shadow";
					document.getElementById("username").className = "text shadow";
					document.getElementById("password").className = "text shadow";
					document.getElementById("mail").className = "text shadow";
				}else{
					window.location = "index.php";
				}
	  		} 
	  	});
	  	e.preventDefault();
	  });

		$("#logout_button").click(function(e) {
			$.ajax({
				type: "POST",
				url: "validate.php",
				data: "action=logout"
			});
		});

		$("#chat_enter").click(function(e) {
			var line = $("#chat_line").val();
			$.ajax({
				type: "POST",
				url: "chat_handle.php",
				data: "line="+line+"&action=insert"
			});
			$("#chat_line").val("");
			e.preventDefault();
		});

		$("#battle_button").click(function(e) {
			var opponentUsername = $("#online_players").val();
            $.ajax({
                type: "POST",
                url: "battle_handle.php",
                data: "username="+opponentUsername+"&action=challenger"
            });
            e.preventDefault();
		});

        $("#accept").click(function(e) {
            $.ajax({
                type: "POST",
                url: "battle_handle.php",
                data: "action=accept",
                success: function(html){
                    window.location = "battlefield.php?id="+html;
                }
            });
            e.preventDefault();
        });

        $("#declinе").click(function() {
            $.ajax({
                type: "POST",
                url: "battle_handle.php",
                data: "action=decline",
                success: function(){
                    unloadPopupBox();
                }
            });
        });

		if(window.location.pathname.split("/").pop() == "lobby.php"){
			setInterval(function(){
 				$.ajax({
					type: "POST",
					url: "chat_handle.php",
					data: "action=refresh",
					success: function(html){
						$("#lines").empty();
						var arr = JSON.parse(html);
						for (var i = 0; i < arr.length; i++) {
							$("#lines").append(arr[i]);
						};
					}
				});
				$("#lines").scrollTop($("#lines").height());
    		},500);

            setInterval(function(){
                $.ajax({
                    type: "POST",
                    url: "battle_handle.php",
                    data: "action=check_status",
                    success: function(html){
                        if(html != ""){
                            window.location = "battlefield.php?id="+html;
                        }
                    }
                });
            },500);

            setInterval(function(){
                $.ajax({
                    type: "POST",
                    url: "battle_handle.php",
                    data: "action=challenged",
                    success: function(html){
                        if(html == "challenged"){
                            loadPopupBox();

                            $('#container').click( function() {
                                unloadPopupBox();
                            });
                        }
                    }
                });
                $("#lines").scrollTop($("#lines").height());
            },1000);

            func();
            function func(){
                $.ajax({
                    type: "POST",
                    url: "online_players.php",
                    success: function(html){
                        $("#online_players").empty();
                        var arr = JSON.parse(html);
                        for (var i = 0; i < arr.length; i++) {
                            $("#online_players").append(arr[i]);
                        };
                    }
                });
            }
        }

        if(window.location.pathname.split("/").pop() == "battlefield.php"){
            initializeBattlefield();
            function initializeBattlefield(){
                $.ajax({
                    type: "POST",
                    url: "battlefield_handle.php",
                    data: "action=player",
                    success: function(html){
                        $("#player").append(html);
                    }
                });
                $.ajax({
                    type: "POST",
                    url: "battlefield_handle.php",
                    data: "action=opponent",
                    success: function(html){
                        $("#opponent").append(html);
                    }
                });
                $.ajax({
                    type: "POST",
                    url: "battlefield_handle.php",
                    data: "action=deal_cards_one",
                    success: function(html){
                        $("#player_deck").append("<img src=\"images/Backside.png\" alt=\"card_deck\" class=\"shadow\" width=\"120px\" height=\"180px\"/>");
                        var hand = html.split(";");
                        hand.forEach(function(entry) {
                            $("#player_hand").append("<img src=\"" + entry + "\" width=100px height=160px class=\"selectable\" onclick=\"playCard(this);\"/>");
                        });
                    }
                });
                $.ajax({
                    type: "POST",
                    url: "battlefield_handle.php",
                    data: "action=deal_cards_two",
                    success: function(html){
                        $("#opponent_deck").append("<img src=\"images/Backside.png\" alt=\"card_deck\" class=\"shadow\" width=\"120px\" height=\"180px\"/>");
                        var hand = html.split(";");
                        hand.forEach(function(entry) {
                            $("#opponent_hand").append("<img src=\"images/Backside.png\" width=100px height=160px class=\"selectable\"/>");
                        });
                    }
                });

            }

            $("#end_turn_button").click(function() {
                $.ajax({
                    type: "POST",
                    url: "battlefield_handle.php",
                    data: "action=end_turn",
                    success: function(html){
                    }
                });
            });

            $(".selectable").click(function(){
                alert("stuff");
            });

            setInterval(function(){
                $.ajax({
                    type: "POST",
                    url: "battlefield_handle.php",
                    data: "action=check_turn",
                    success: function(html){
                        $("#end_turn_field").empty();
                        $("#end_turn_field").append(html);
                    }
                });
            },1000);

            setInterval(function(){
                $.ajax({
                    type: "POST",
                    url: "battlefield_handle.php",
                    data: "action=deal_hand_one",
                    success: function(html){
                        if(html != "one_not_different" && html != "two_not_different"){
                            $("#player_hand").empty();
                            var hand = html.split(";");
                            hand.forEach(function(entry) {
                                $("#player_hand").append("<img src=\"" + entry + "\" width=100px height=160px class=\"selectable\" onclick=\"playCard(this);\"/>");
                            });
                        }
                    }
                });
                $.ajax({
                    type: "POST",
                    url: "battlefield_handle.php",
                    data: "action=deal_hand_two",
                    success: function(html){
                        if(html != "one_not_different" && html != "two_not_different"){
                            $("#opponent_hand").empty();
                            var hand = html.split(";");
                            hand.forEach(function() {
                                $("#opponent_hand").append("<img src=\"images/Backside.png\" width=100px height=160px/>");
                            });
                        }
                    }
                });

            },1000);

            setInterval(function(){
                $.ajax({
                    type: "POST",
                    url: "battlefield_handle.php",
                    data: "action=check_field_one",
                    success: function(html){
                        if(html != "|"){
                            $("#player_field").empty();
                            $("#opponent_field").empty();
                            var field = html.split("|");
                            var fieldOne = field[0].split(";");
                            var fieldTwo = field[1].split(";");

                            fieldOne.forEach(function(entry) {
                                if(entry != ""){
                                    $("#player_field").append("<img src=\"" + entry + "\" width=135px height=185px class=\"selectable\" onclick=\"playCard(this);\"/>");
                                }
                            });
                            fieldTwo.forEach(function(entry) {
                                if(entry != ""){
                                    $("#opponent_field").append("<img src=\"" + entry + "\" width=135px height=185px class=\"selectable\" onclick=\"playCard(this);\"/>");
                                }
                            });
                        }
                    }
                });
            },1000);

        }
        $(window).on('beforeunload', function(){
            $.ajax({
                type: "POST",
                url: "set_offline.php"
            });
        });
	});
}

